import { Area, Datum, Pie } from "@antv/g2plot";
import { Ref, unref } from "vue";
type ListItem = {
  name?: string;
  type?: string;
  value: number;
};
export function pieInit(
  chartRef: Ref,
  val: Record<string, any>[],
  color: Array<string> = ["#0daeff", "#0fc684", "#fdbc4d"],
  title: string = "存储使用"
) {
  return new Pie(unref(chartRef), {
    width: 350,
    height: 350,
    appendPadding: [40, 80, 80, 80],
    data: unref(val),
    angleField: "value",
    colorField: "type",
    radius: 1,
    innerRadius: 0.64,
    label: undefined,
    meta: {
      value: {
        formatter: (v) => formatFileSize(v),
      },
    },
    color,
    statistic: {
      title: {
        formatter: () => title,
        offsetY: -2,
        style: {
          fontSize: "16px",
          fontWeight: "400",
          opacity: 0.5,
        },
      },
      content: {
        offsetY: 6,
        style: {
          fontSize: "16px",
          fontWeight: "500",
        },
      },
    },
    interactions: [{ type: "element-active" }],
    state: {
      active: {
        style: {
          lineWidth: -10,
          stroke: "#fff",
          opacity: 0.5,
        },
      },
    },
    legend: {
      layout: "horizontal",
      position: "bottom",
      // offsetY: -10,
      itemName: {
        formatter: (text: string, item: ListItem) => {
          const items = unref(val).filter((d: any) => d.type === item.value);
          return items.map(
            (b: Record<string, number>) =>
              `${b.type}：${formatFileSize(b.value)}`
          );
        },
      },
    },
  });
}
export function pieInits(
  chartRefs: Ref,
  val: Record<string, any>[],
  color: Array<string> = ["#0daeff", "#0fc684", "#fdbc4d"],
  title: string = "设备台数"
) {
  return new Pie(unref(chartRefs), {
    width: 600,
    height: 350,
    appendPadding: [40, 80, 80, 80],
    data: unref(val),
    angleField: "value",
    colorField: "type",
    radius: 1,
    innerRadius: 0.64,
    label: undefined,
    meta: {
      value: {
        formatter: (v) => v + "台",
      },
    },
    color,
    statistic: {
      title: {
        formatter: () => title,
        offsetY: -2,
        style: {
          fontSize: "16px",
          fontWeight: "400",
          opacity: 0.5,
        },
      },
      content: {
        offsetY: 6,
        formatter: () => `${val[0].value + val[1].value + "台"}`, // 添加总数
        style: {
          fontSize: "16px",
          fontWeight: "500",
        },
      },
    },
    interactions: [{ type: "element-active" }],
    state: {
      active: {
        style: {
          lineWidth: 0,
          stroke: "#fff",
          opacity: 0.5,
        },
      },
    },

    legend: {
      layout: "horizontal",
      position: "bottom",

      itemName: {
        formatter: (text: string, item: ListItem) => {
          const items = unref(val).filter((d: any) => d.type === item.value);
          return items.map(
            (b: Record<string, number>) => `${b.type}：${b.value}台`
          );
        },
      },
    },
  });
}
function formatFileSize(fileSizeInBytes: number | string): string {
  const units = ["B", "KB", "MB", "GB", "TB"];
  let index = 0;
  let fileSize = Number(fileSizeInBytes) * 1024 * 1024;
  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024;
    index++;
  }
  return fileSize.toFixed(2) + units[index];
}
export class lineChart {
  private readonly asr: string;
  constructor(name: string) {
    this[name] = "";
    this.asr = name;
  }
  init(chartRef: Ref, val: Record<string, any>[]) {
    const totalUsageArray = val.map((item) => parseInt(item["总使用量"], 10)); // 将字符串值转为整数数组
    const minTotalUsage = Math.min(...totalUsageArray);
    const yAxisConfig =
      val[0].总使用量 > 0
        ? {
            nice: true,
            min: minTotalUsage,
            label: {
              formatter: (value: any) => `${value} MB`,
            },
            grid: {
              line: {
                style: {
                  stroke: "#ebebeb",
                  lineDash: [4, 4],
                },
              },
            },
          }
        : {
            min: 0,
            max: 2000,
            label: {
              formatter: (value: any) => `${value} MB`,
            },
            grid: {
              line: {
                style: {
                  stroke: "#ebebeb",
                  lineDash: [4, 4],
                },
              },
            },
          }; // 默认的 yAxis 配置
    this[this.asr] = new Area(unref(chartRef), {
      height: 385,
      data: val,
      xField: "timePeriod",
      yField: "总使用量",
      smooth: true,
      label: undefined,
      tooltip: {
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          type: "x",
          line: {
            style: {
              stroke: "#0DAEFF", // 修改交叉线的颜色
              lineWidth: 2, // 修改交叉线的宽度
              lineDash: [4, 4], // 修改交叉线的虚线样式
            },
          },
        },
        formatter: (datum: Datum) => {
          return { name: "总使用量", value: datum.总使用量 + "MB" };
        },
        domStyles: {
          "g2-tooltip-list": {
            background: "rgb(255, 255, 255)",
            height: "25px",
            lineHeight: "25px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "0px 5px",
            borderRadius: "2px",
          },
          "g2-tooltip": {
            background: "rgba(232, 241, 254,.1)",
            height: "72px",
          },
          "g2-tooltip-title": {
            color: "#000",
          },
        },
      },
      xAxis: {
        maxLimit: 8,
        tickCount: 15,
        range: [0.05, 1],
        grid: {
          line: {
            style: {
              stroke: "#ebebeb",
            },
          },
        },
      },
      yAxis: yAxisConfig,

      interactions: [
        {
          type: "active-region",
        },
      ],

      color: "l(70) 0:#1EE7FF 0.5:#0DAEFF 1:#6F42FB",
      areaStyle: () => {
        return {
          fill: "l(270) 0:#1180FF00 0.5:#117EFF29 1:#117EFF",
          cursor: "pointer",
        };
      },
    });

    this[this.asr].render();
  }
  upChart(val: Record<string, any>[]) {
    this[this.asr].changeData(val);
  }
}
export class lineCharts {
  private readonly asr: string;
  constructor(name: string) {
    this[name] = "";
    this.asr = name;
  }
  init(chartRef: Ref, val: Record<string, any>[]) {
    const totalUsageArray = val.map((item) => parseInt(item["总使用量"], 10)); // 将字符串值转为整数数组

    const minTotalUsage = Math.min(...totalUsageArray);
    const yAxisConfig =
      val[1]["总使用量"].length > 0
        ? {
            nice: true,
            min: minTotalUsage,
            label: {
              formatter: (value: any) => `${value} mb`,
            },
            grid: {
              line: {
                style: {
                  stroke: "#ebebeb",
                  lineDash: [4, 4],
                },
              },
            },
          }
        : {
            min: 0,
            max: 2000,
            label: {
              formatter: (value: any) => `${value} MB`,
            },
            grid: {
              line: {
                style: {
                  stroke: "#ebebeb",
                  lineDash: [4, 4],
                },
              },
            },
          }; // 默认的 yAxis 配置

    this[this.asr] = new Area(unref(chartRef), {
      height: 385,
      data: val,
      xField: "timePeriod",
      yField: "总使用量",
      smooth: true,

      tooltip: {
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          type: "x",
          line: {
            style: {
              stroke: "#0DAEFF", // 修改交叉线的颜色
              lineWidth: 2, // 修改交叉线的宽度
              lineDash: [4, 4], // 修改交叉线的虚线样式
            },
          },
        },
        formatter: (datum: Datum) => {
          return { name: "总使用量", value: datum.总使用量 + "MB" };
        },
        domStyles: {
          "g2-tooltip-list": {
            background: "rgb(255, 255, 255)",
            height: "25px",
            lineHeight: "25px",

            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "0px 5px",
            borderRadius: "2px",
          },
          "g2-tooltip": {
            background: "rgba(232, 241, 254,.1)",
            height: "72px",
          },
          "g2-tooltip-title": {
            color: "#000",
          },
        },
      },
      xAxis: {
        maxLimit: 8,
        tickCount: 15,
        range: [0.05, 1],
        grid: {
          line: {
            style: {
              stroke: "#ebebeb",
            },
          },
        },
      },
      yAxis: yAxisConfig,
      interactions: [{ type: "element-active" }],
      color: "l(70) 0:#1EE7FF 0.5:#0DAEFF 1:#6F42FB",
      areaStyle: () => {
        return {
          fill: "l(270) 0:#1180FF00 0.5:#117EFF29 1:#117EFF",
          cursor: "pointer",
        };
      },
    });
    this[this.asr].render();
  }
  upChart(val: Record<string, any>[]) {
    this[this.asr].changeData(val);
  }
}
